সকল এইচটিএমএল এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যেতে পারে। আমরা যখন সিএসএসের মাধ্যমে ওয়েবপেজের ডিজাইন এবং লেআউট নিয়ে কথা বলি, তখন একটি টার্ম আমাদের কাছে চলে আসে তা হলো "box model"।
বক্স মডেল স্বাভাবিকভাবেই একটি বক্স যা প্রত্যেকটি এইচটিএমএল এলিমেন্টকে একটি বক্সের মধ্যে মুড়িয়ে দেয়। ইহা মার্জিন, বর্ডার, পেডিং এবং প্রকৃত কন্টেন্ট নিয়ে গঠিত হয়। নিচে ছবির মাধ্যেম বক্স মডেলের ব্যখ্যা দেওয়া হলঃ
উপরের ছবির বিভিন্ন অংশের ব্যাখ্যাঃ
আমরা বক্স মডেল ব্যবহার করেও একটি এলিমেন্টের চারপাশে বর্ডার সেট করতে পারি এবং এলিমেন্টের মধ্যে স্পেস(space) রাখতে পারি।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
background-color: lightgrey;
width: 350px;
color: brown;
border: 30px solid blue;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>বক্স মডেল সাজানো</h2>
<p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।</p>
<div>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।</div>
</body>
</html>প্রত্যেকটি ব্রাউজারের জন্য এলিমেন্টের প্রস্থ(width) এবং দৈর্ঘ্য(height) সঠিকভাবে সেট করতে হলে আপনাকে অবশ্যই বক্স মডেলের ব্যবহার সম্পর্কে জানতে হবে।
বিঃদ্রঃ সিএসএস এর মাধ্যমে আপনি যখন একটি এলিমেন্টের দৈর্ঘ্য এবং প্রস্থ সেট করেন, তখন শুধুমাত্র কন্টেন্টের আয়তনের দৈর্ঘ্য এবং প্রস্থ সেট করেন।
কিন্তু একটি এলিমেন্টের সম্পূর্ণ আয়তন সেট করতে এর দৈর্ঘ্য এবং প্রস্থের সহিত আপনাকে অবশ্যই প্যাডিং, বর্ডার এবং মার্জিন সংযুক্ত করতে হবে।
ধরুন, আপনি একটি < div> এলিমেন্টকে স্টাইল করতে চাচ্ছেন যার width হবে 350px, তাহলে সেটিকে নিচের উদাহরণের মত স্টাইল করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
background-color: lightsalmon;
width: 320px;
padding: 15px;
border: 5px solid black;
margin: 0;
}
</style>
</head>
<body>
<h2>সম্পূর্ণ প্রস্থ পরিমাপ করুন</h2>
<img src="images/natural.jpg" width="360" height="263" alt="natural">
<div> উপরের ছবিটির প্রস্থ 360px এবং এই এলিমেন্টটিরও সর্বমোট প্রস্থ 360px।</div>
</body>
</html>উপরের ছবিটির প্রস্থ ৩৬০ পিক্সেল এবং সম্পূর্ণ এলিমেন্টটির প্রস্থও ৩৬০ পিক্সেল।
এখানে উপরের উদাহরণের সহজ হিসাব দেখানো হলোঃ
320px (width)
+ 30px (বাম + ডান পাশের প্যাডিং)
+ 10px (বাম + ডান পাশের বর্ডার)
+ 0px (বাম + ডান পাশের মার্জিন)
= 360px
একটি এলিমেন্টের সম্পূর্ণ প্রস্থ হিসাবের সূত্র হলোঃ
এলিমেন্টের সম্পূর্ণ প্রস্থ = কন্টেন্টের প্রস্থ + বাম পাশের প্যাডিং + ডান পাশের প্যাডিং + বাম পাশের বর্ডার + ডান পাশের বর্ডার + বাম পাশের মার্জিন + ডান পাশের মার্জিন
একটি এলিমেন্টের সম্পূর্ণ উচ্চতা হিসাবের সূত্র হলোঃ
এলিমেন্টের সম্পূর্ণ উচ্চতা = কন্টেন্টের উচ্চতা + উপরের প্যাডিংন + নিচের প্যাডিং + উপরের বর্ডার + নিচের বর্ডার + উপরের মার্জিন + নিচের মার্জিন
বিঃদ্রঃ ইন্টারনেট এক্সপ্লোরার-৮ এবং এর আগের ভার্সনগুলোতে width প্রোপার্টির মধ্যে padding এবং border যুক্ত হয়ে যায়। তাই এই সমস্যা সমাধানের জন্য এইচটিএমএল পেজে < !DOCTYPE html> যুক্ত করুন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
